<template>
	<view class="phonepage">
		<view class="logobox" v-if="option_data=='login'">
			<view class="header-img">
				<image src="/static/image/appicon.png" mode="aspectFill"></image>
			</view>
		</view>
		<form @submit="formSubmit">
			<view class="phoneitem">
				<view class="phoneleft">
					<image src="/static/image/ttphone.png" mode="aspectFill"></image>
					<input name="phone" maxlength="11" type="number" placeholder="请输入手机号" @input="changebg" />
				</view>
			</view>
			<view class="phoneitem">
				<view class="phoneleft">
					<image src="/static/image/ttlock.png" mode="aspectFill"></image>
					<input name="code" maxlength="5" type="number" placeholder="请输入验证码" />
				</view>
				<text style="color: #999;">|</text>
				<view :class="['code-botton',codedata>0 && fasttime<=0?'lock':'']" @click="getcode">{{fasttime>0?fasttime+'s':'获取验证码'}}</view>
			</view>
			
			<view></view>
			
			<view class="agreement" v-if="option_data=='login'">
				<checkbox-group @change="radioChange">
					<label>
						<checkbox value="cb" color="#378aff" style="transform: scale(0.5);" />
					</label>
				</checkbox-group>
				<text style="font-weight: bold;">我已阅读并同意</text><navigator class="font-color" url="/pages/article/index?key=registrationAgreement">《用户协议》</navigator>
				及<navigator class="font-color" url="/pages/article/index?key=privacyAgreement">《隐私政策》</navigator>
			</view>
			
			<button formType="submit" type="primary" class="comfir">{{botton_title}}</button>
		</form>
	</view>
</template>

<script>
	/**
	 * 用户手机登陆
	 */
	export default {
		data() {
			return {
				codedata: '', //监听input是否有数据
				fasttime: 0, //1分钟后再次获取验证码
				botton_title: '',
				option_data: '',
				isagree: false,
				loginlock:false,
			}
		},
		onShow() {
			console.log(uni.getStorageInfoSync());
		},
		onLoad(option) {
			console.log(option);
			if (option.op == 'bind') {
				uni.setNavigationBarTitle({
					title: '绑定手机'
				});
				this.botton_title = '绑定';
			} else if (option.op == 'login') {
				uni.setNavigationBarTitle({
					title: '手机登陆'
				});
				this.botton_title = '立即登陆';
			}
			this.option_data = option.op;
		},

		methods: {
			radioChange(e) {
				console.log(e)
				let value = e.detail.value;
				if (value.length > 0) {
					this.isagree = true;
				} else {
					this.isagree = false;
				}
			},
			
			changebg(e) {
				this.codedata = e.detail.value
				if (this.codedata > 0) {
					this.inputbg = true
				} else {
					this.inputbg = false
				}
			},
			//用户登陆/修改电话号
			formSubmit(e) {
				let phones = e.detail.value.phone;
				let codes = e.detail.value.code;
				if (phones && codes) {
					if (this.option_data == "login") {
						//登陆
						this.userlogin(phones, codes)
					} else if (this.option_data == "bind") {
						//绑定手机号码
						this.bindphone(phones, codes)
					}
				} else {
					this.$ShowMsg('手机或验证码不能为空~');
				}
			},
			//用户绑定手机号
			bindphone(iphone, icode) {
				let userInfo = uni.getStorageSync('user_info')
				if (userInfo.phone == iphone) {
					this.$ShowMsg('不能使用相同号码绑定！');
					return;
				}
				this.$HttRequest({
					url: '/setting/modifyPhone',
					param: {
						phone: iphone,
						code: icode
					}
				}, 'POST').then((res) => {
					if (res.status === 10000) {
						console.log(res)
						//更新access_token
						uni.setStorageSync('dxzk_access_token', res.data);
						//更新手机号码
						userInfo.phone = iphone;
						uni.setStorageSync('user_info', userInfo);
						uni.setStorageSync('user_phone', true);
						this.$ShowMsg('手机号绑定成功！')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 3000)
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},

			//用户登陆
			userlogin(iphone, icode) {
				if (!this.isagree) {
					this.$ShowMsg('请同意并勾选《用户协议》、《隐私政策》',null,false); 
					return;
				}
				this.$HttRequest({
					url: '/login/smsLogin',
					param: {
						phone: iphone,
						code: icode
					}
				}, 'POST',true).then((res) => {
					if (res.status === 10000) {
						try {
							//存储用户信息
							this.$Saveinfo(res.data.access_token, res.data.info)
						} catch (e) {
							this.$ShowMsg(e);
						}
					} else {
						this.$ShowMsg(res.message)
					}

				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},

			//获取验证码
			getcode() {
				//倒计时屏蔽点击
				// if (this.fasttime > 0) {
				// 	return
				// }
				if(this.loginlock){
					return
				}
				this.loginlock =true
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.codedata))) {
					this.$ShowMsg("手机号码有误，请重新输入！");
					return;
				}
				this.$HttRequest({
					url: '/setting/authentication',
					param: {
						phone: this.codedata,
					}
				}, 'POST').then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.$ShowMsg('短信已发送')
						//锁定时间，再次发送短信
						this.fasttime = 59
						//解锁获取验证码
						this.loginlock = false
						this.showyanz()
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			showyanz() {
				//隐藏获取验证码按钮
				let showhide = setInterval(() => {
					this.fasttime -= 1;
					if (this.fasttime < 1) {
						clearInterval(showhide);
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	.phonepage {
		width: 85vw;
		margin: 0 auto;
		height: auto;
		display: flex;
		flex-direction: column;
		.font-color{
			color: $uni-botton-primary;
		}
		.agreement {
			margin-top: 20rpx;
			font-size: 25rpx;
			color: #999;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
		
		}
		.logobox {
			width: 100%;
			.header-img {
				margin: 140rpx auto;
				// margin-top: 180rpx;
				// margin-bottom: 150rpx;
				border-radius: 50%;
				width: 200rpx;
				height: 200rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid $uni-color-primary;
				image {
					width: 130rpx;
					height: 110rpx;
				}
			}
		}

		.comfir {
			width: 80%;
			height: 100rpx;
			background-color: $uni-color-primary;
			border-radius: 50rpx;
			margin: 0rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			margin-top: 150rpx;
			font-size: 32rpx;
		}

		.phoneitem {
			display: flex;
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid #e6e6e6;
			display: flex;
			font-size: 30rpx;
			justify-content: space-between;
			align-items: center;

			.phoneleft {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}

			.code-botton {
				background-color: #e6e6e6;
				width: 180rpx;
				height: 60rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
			}

			.lock {
				background-color: #118CFE;
				color: #fff
			}

			input {
				margin-left: 15rpx;
			}
		}
	}
</style>
